<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>
<div class="table-main">
  <div class="header">
    <div class="left flex" [routerLink]="['/main']" id="btn-back">
      <div class="left-icon">
        <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
      </div>
      <div class="left-name">
        <span class="back-name">返回</span>
      </div>
    </div>
    <div class="center">预定列表</div>
  </div>
  <app-table-nav [navName]="'reserve'"></app-table-nav>

  <div>
    <table class="info-list" *ngFor="let v of infoList">
      <tbody>
      <tr>
        <td>姓名</td>
        <td>{{v.name}}</td>
      </tr>
      <tr>
        <td>手机号</td>
        <td>{{v.mobile}}</td>
      </tr>
      <tr>
        <td>预约时间</td>
        <td style="font-weight: bold;color: rgba(0, 0, 0, 0.7)">{{v.start_time}}</td>
      </tr>
      <tr>
        <td>预定桌号</td>
        <td>{{v.reserve['reserve_table_class']}} {{v.reserve['reserve_table_name']}}</td>
      </tr>
      <tr>
        <td>用餐人数</td>
        <td>{{v.people_num}} 人</td>
      </tr>
      <tr>
        <td>备注</td>
        <td>{{v.content}}</td>
      </tr>
      </tbody>
    </table>
    <div class="load-data" *ngIf="loading">
      <p class="load-data-icon">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
      </p>
      <p class="load-data-text">
        数据加载中
      </p>
    </div>
  </div>
</div>
<div class="no-data" *ngIf="!infoList.length && isFlag">
  <p class="load-data-description">
    <i class="fa fa-info-circle"></i> 暂无预定记录
  </p>
</div>
